<template>
  <div>
    <h2>Echarts 封装</h2>
    <linePieVue
      :echartsRef="'echartsRef'"
      :height="'500px'"
      :legend="legend"
      :xAxis="xAxis"
      :yAxis="yAxis"
      :series="series"
    />
  </div>
</template>

<script>
import linePieVue from "@/base-ui/echarts/line-pie.vue";
export default {
  components: { linePieVue },
  data() {
    return {
      legend: [],
      xAxis: [],
      yAxis: [],
      series: [],
    };
  },

  created() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // setTimeout(() => {
      this.legend = ["Evaporation", "Precipitation", "Temperature"];
      (this.xAxis = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]),
        (this.yAxis = [
          {
            min: 0,
            max: 250,
            interval: 50,
          },
          {
            min: 0,
            max: 25,
            interval: 5,
          },
        ]);
      this.series = [
        [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
      ];

      // }, 3000);

      // setTimeout(() => {
      //   this.xAxis = ['1', '1', '1', '1', '1', '1', '1']
      // }, 4000);
      // setTimeout(() => {
      //   this.xAxis = []
      //   this.series[0] = []
      //   this.series[1] = []
      // }, 8000);
      // setTimeout(() => {
      //   this.legend = ['Evaporation', 'Precipitation', 'Temperature']
      //   this.xAxis = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      //     this.yAxis = [{
      //       min: 0,
      //       max: 250,
      //       interval: 50
      //     }, {
      //       min: 0,
      //       max: 25,
      //       interval: 5,
      //     }]
      //   this.series = [[
      //     2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      //   ], [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 2000.3, 23.4, 23.0, 16.5, 12.0, 6.2]]

      // }, 10000);
    },
  },
};
</script>

<style lang="less" scoped></style>
